<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>03-app组件</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            
        </div>
    </body>

    <script type="text/javascript">

        // 创建Student组件
        let Student = Vue.extend({
            name: "Student",
            template: `
                    <div>
                        <h3>姓名：{{uname}}</h3>
                        <h3>年龄：{{age}}</h3>
                        <h3>性别：{{sex}}</h3>
                        <button @click="ageAdd">年龄+1</button>
                    </div>
                `,
            data(){
                return {
                    uname: "小溜",
                    age: 12,
                    sex: "男"
                }
            },
            methods: {
                ageAdd(){
                    this.age++
                }
            }
        })
        // 创建Book组件
        let Book = Vue.extend({
            name: "Book", 
            template: `
                    <div>
                        <h3>书名：{{bookname}}</h3>                       n
                        <h3>价格：{{price}}</h3>
                        <button @click="changePrice">涨价</button>
                    </div>
                `,
            data(){
                return {
                    bookname: "不知道",
                    price: 120,
                }
            },
            methods: {
                changePrice(){
                    this.price++
                }
            }
        })

        // 创建Hello组件
        let Hello = Vue.extend({
            name: "Hello",
            template: `
                <h1>我是一个全局组件</h1>
            `
        })
        // 注册全局组件
        Vue.component("Hhh",Hello)

        // 跟组件
        let App = Vue.extend({
            template:`
                <div>
                    <Hhh />
                    <Stu />    
                    <Bo />    
                </div>
            `,
            components:{
                "Stu": Student,
                "Bo": Book
            }
        })
        

        // 实力vm
        let vm = new Vue({
            el: "#app",
            template:`<App/>`,
            components:{
                App
            }
        })
        
    </script>
</html>